<!--
 * @Description: 
 * @Author: xuzp4
-->
<template>
  <el-dialog
    class="toast-dialog"
    :visible="_visible"
    :close-on-click-modal="false"
    :title="$t('targets.target')"
    :append-to-body="true"
    width="780px"
    :before-close="handleClose"
  >
    <div class="content pl-50 d-flex jc-around ai-center">
      <UploadImg ref="UploadImg" @updateFile="handleUpload" />
      <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
        <el-form-item :label="$t('targets.person_name')" prop="person_name">
          <el-input v-model="formData.person_name" />
        </el-form-item>
        <el-form-item :label="$t('targets.person_age')" prop="person_age">
          <el-input v-model="formData.person_age" />
        </el-form-item>
        <el-form-item :label="$t('targets.person_gender')" prop="person_gender">
          <el-select v-model="formData.person_gender">
            <el-option
              v-for="item in genderList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('targets.person_idcard')" prop="person_idcard">
          <el-input v-model="formData.person_idcard" />
        </el-form-item>
        <el-form-item :label="$t('targets.person_addr')" prop="person_addr">
          <el-input v-model="formData.person_addr" />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <MyButton class="cancel" @click="cancel">{{
        $t("common.cancel")
      }}</MyButton>
      <MyButton class="confirm" @click="confirm">{{
        $t("common.confirm")
      }}</MyButton>
    </div>
  </el-dialog>
</template>

<script>
import { addTarget } from "./service";
import util from "@/utils";
import UploadImg from "@/components/UploadImg";
import MyButton from "@/components/Button";
import { genderList } from "@/utils/CONSTANT";
export default {
  components: { UploadImg, MyButton },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    lib_id: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  data() {
    return {
      formData: {},
      rules: {
        person_age: [
          {
            pattern: /^([0-9]|[1-9][0-9]|[1-9][0-9][0-9])$/,
            trigger: "change",
            message: this.$t("targets.age_rule"),
          },
        ],
      },
      genderList,
    };
  },
  methods: {
    handleUpload(file) {
      this.formData.img = file;
    },
    confirm() {
      if (!this.formData.img) {
        util.msg.warning("please_upload_img");
        return;
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = {
            ...this.formData,
            lib_id: this.lib_id,
          };
          addTarget(params).then((res) => {
            util.msg.success("add_success");
            this.$emit("refresh");
            this.cancel();
          });
        }
      });
    },
    cancel() {
      this.$refs.form.resetFields();
      this.formData = {};
      this._visible = false;
      this.$refs.UploadImg.imageUrl = "";
    },
    handleClose(done) {
      this.cancel();
      done();
    },
  },
};
</script>
<style lang="less" scoped>
.toast-dialog {
  z-index: 9999;
  .content {
    width: 100%;
    /deep/ .el-form {
      width: 100%;
      .el-input {
        width: 215px;
      }
    }
  }
}
</style>
